<template>
    <div class="discuss-bg" v-show="isShowDiscussBox" @click="closeHandle">
        <div class="discuss-body" @click.stop="">
            <div class="body-title">{{ $t("know_answer_discuss_count", {'value': total}) }}<img src="/static/images/close-b.png" class="discuss-close" @click="closeHandle"/></div>
            <div class="discuss-list" :style="{'height': isToComment ? 'calc(100% - 97px)' : 'calc(100% - 47px)'}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getDiscussPage"
                    >
                        <div class="discuss-item" v-for="discuss in discussList" :key="discuss.id">
                            <div class="user-info">
                                <img :src="appUrl + discuss.regUserDetailVO.urxExtra43" class="head-img"/>
                                <div class="user-name">
                                    <div>{{ discuss.regUserDetailVO.usrDisplayBil }} <span v-if="discuss.replyUserName"> {{ $t("know_answer_discuss_comment") }} {{ discuss.replyUserName }}</span></div>
                                    <div style="color: #c0bfc4">{{ discuss.createTime | formTime('', 'subTime') }}</div>
                                </div>
                                <div class="user-comment" @click="toUser(discuss.regUserDetailVO.usrEntId, discuss.regUserDetailVO.usrDisplayBil)">{{ $t("know_answer_discuss_comment") }}</div>
                            </div>
                            <div class="discuss-content" v-html="$xss(discuss.title)"></div>
                        </div>
                        <div v-if="pageNo >= totalPage" style="margin: 10px 0;text-align: center;color: #ccc">{{ $t("know_answer_discuss_not_data") }}</div>
                    </van-list>
                </van-pull-refresh>
            </div>
            <div v-if="isToComment" class="my-input" @click="myInputAnswer">{{ $t("know_im_answer") }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DiscussList',
    props: {
        answerId: null,
        isShowDiscussBox: false,
        pushAnswerBox: null,
        toUserInfo: null,
        isToComment: true
    },
    data() {
        return {
            discussList: [],
            pageNo: 1,
            total: 0,
            totalPage: 1,
            finished: false,
            isRefresh: false,
            isLoading: false
        };
    },
    created() {
        this.getDiscussPage();
    },
    watch: {
        answerId() {
            this.discussList = [];
            this.getDiscussPage();
        }
    },
    methods: {
        /**
         * 关闭处理
         */
        closeHandle() {
            this.$emit('update:isShowDiscussBox', !this.isShowDiscussBox);
        },
        /**
         * 我来回答
         */
        myInputAnswer() {
            this.$emit('update:toUserInfo', {answerId: this.answerId, userEntId: 0});
            this.$emit('update:pushAnswerBox', !this.writeAnwser);
        },
        /**
         * 回复别人的回答
         * @param userEntId
         * @param userName
         */
        toUser(userEntId, userName) {
            this.$emit('update:toUserInfo', {answerId: this.answerId, userEntId: userEntId, userName: userName});
            this.$emit('update:pushAnswerBox', !this.writeAnwser);
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                //没有去实现下拉刷新请求获取数据，若有需要，在此处加入请求获取数据的代码即可
                this.isRefresh = false;
            }, 900);
        },
        /**
         * 获取讨论列表数据
         */
        getDiscussPage() {
            if (this.answerId === null) {
                return;
            }
            this.$axios({
                method: 'GET',
                // url: `/app/know/answers/${this.$route.params.id}`,
                url: `/app/api/trainee/know/list/discuss`,
                params: {
                    pageNo: this.pageNo,
                    answerId: this.answerId,
                    pageSize: 10,
                    orderBy: ''
                }
            }).then((res) => {
                if (res.data.results && res.data.results.length !== 0) {
                    this.discussList = [...this.discussList, ...res.data.results];
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.discussList.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
    .discuss-bg {
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 98;
        top: 0;
        .discuss-body {
            height: 70%;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: #fff;
            z-index: 99;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            .body-title {
                position: relative;
                height: 46px;
                border-bottom: 1px #ccc solid;
                font-size: 18px;
                text-align: center;
                line-height: 46px;
                /*margin-bottom: 5px;*/
                .discuss-close {
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    right: 15px;
                    top: 12px;
                }
            }
            .discuss-list {
                overflow-y: scroll;
                height: calc(100% - 97px);
                .discuss-item {
                    margin-top: 5px;
                    padding: 0 15px;
                    border-bottom: 1px #ccc dashed;
                    .user-info {
                        display: flex;
                        flex-wrap: nowrap;
                        align-items: center;
                        height: 50px;
                        justify-content: center;
                        .head-img {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                        }
                        .user-name {
                            margin-left: 10px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            flex: 2;
                        }
                        .user-comment {
                            width: 30px;
                        }
                    }
                    .discuss-content {
                        margin: 5px 0 10px;
                        font-size: 16px;
                    }
                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
            .my-input {
                height: 50px;
                line-height: 50px;
                width: 100%;
                position: absolute;
                bottom: 0;
                padding: 0 15px;
                color: #c0bfc4;
                border-top: 1px solid #ccc;
            }
        }
    }
</style>
